<template>
<van-empty
	v-if="prompt"
	image="https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/icon/kong-zhuang-tai.png"
	image-size="80"
	:description="Tips">
	<van-button v-if="buttonTips" @click="goLogin" block color="#ff9d00" type="primary" class="bottom-button">登录</van-button>
</van-empty>
<van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  :immediate-check="false"
  offset="100"
  @load="onLoad">
<div class="views">
	<div class="concern-view" v-if="userTravelData.length > 0" v-for="(item,index) in userTravelData" :key="index">
		<div class="concern-name concern-Padd global-display global-a-items">
			<img :src="item.author_data[0].avatarUrl" class="fadeIn">
			<div class="concern-nackname">
				<p>{{item.author_data[0].nickname}}</p>
				<p>{{item.time_stamp}}</p>
			</div>
		</div>
		<div class="card-view-b">
			<div v-for="(item_a,index_a) in item.image.slice(0, 5)" 
			:key="index_a"
			@click="showImage(item.image,index_a)"
			>
				<img :src="item_a" class="fadeIn">
				<span v-if="item.image.length > 5" class="fadeIn">+{{item.image.length - 5}}</span>
			</div>
		</div>
		<!-- 地址 -->
		<div class="concern-address concern-Padd global-display global-a-items">
			<img src="@/icon/concern/concern-address.png"/>
			<span class="text-show">{{item.address}}</span>
		</div>
		<!-- 标题，内容 -->
		<div class="concern-content" @click="juMP(item._id)">
			<p>{{item.title}}</p>
			<p class="concern-details concern-Padd text-show">{{item.content}}</p>
		</div>
		<!-- 评论，点赞，收藏 -->
		<div class="concern-Data concern-Padd global-display global-a-items">
			<div @click="juMP(item._id)">
				<img :src="Pinglun">
				<span>{{item.comments}}</span>
			</div>
			<div @click="giveAlike(index,item.isLiked,item._id)">
				<img :src="item.isLiked ? Yidianzan : Dianzan">
				<span>{{item.likes}}</span>
			</div>
			<div @click="operCollection(index,item.isCollect,item._id)">
				<img :src="item.isCollect ? Yishowcang : Showcang">
				<span>{{item.collections}}</span>
			</div>
		</div>
	</div>
</div>
</van-list>
<div style="height: 200px;"></div>
<tabbar/>
<skIndex v-if="skeLeton"/>
</template>

<script setup>
	import tabbar from '@/page/Tabbar/index.vue'
	import {ref,onMounted,nextTick} from 'vue'
	import request from '@/api/request.js'
	import Dianzan from '@/icon/index/dianzan.svg'
	import Yidianzan from '@/icon/index/yidianzan.svg'
	import Pinglun from '@/icon/index/pinglun.svg'
	import Showcang from '@/icon/index/shoucang.svg'
	import Yishowcang from '@/icon/index/yishoucang.svg'
	// 图片预览
	import { showImagePreview } from 'vant';
	import { useRouter } from 'vue-router'
	const $router = useRouter()  // 这是路由跳转的
	import emitter from '@/api/event.js'
	// 骨架屏
	import skIndex from '@/page/Skeleton-screen/SK-concern.vue' 
	// 骨架屏
	const skeLeton = ref(true)
	// 存储用户游记数据
	const userTravelData = ref([])
	// 存储推荐关注的作者
	const reAuthorData = ref([])
	// 显示//隐藏提示
	const prompt = ref(false)
	const Tips = ref('')
	const buttonTips = ref(false)
	// 请求数据
	onMounted(()=>{
		requestApi()
	})
	// 请求数据
	async function requestApi(){
		try{
			const userFauthor = await request.get('/user_following_author',{page:1})
			const reAuthor = await request.get('/recommended_author')
			console.log(userFauthor);
			console.log(reAuthor);
			userTravelData.value = userFauthor.data
			reAuthorData.value = reAuthor.data
			prompt.value = userFauthor.data.length > 0 ? false : true
			Tips.value = userFauthor.data.length > 0 ? '' : '你还没有关注的作者'
			buttonTips.value = false
			await nextTick()
			if(reAuthor.data.length > 0){
				updateView()
			}
		}catch(e){
			prompt.value = true
			Tips.value = ''
			buttonTips.value = true
			skeLeton.value = false
		}
	}
	// 向视图层插入div
	function updateView() {
		const app = document.querySelector('.views')
		const m2 = document.createElement('div')
		m2.className = 'rec-Attention'
		const nextSibling = app.children[0] ? app.children[0].nextElementSibling : null
		app.insertBefore(m2, nextSibling)
		const m2HTML = `
		  <p class="rec-Attention-p">你可能感兴趣的人</p>
		  <div class="Interested-in global-display global-a-items">
			${reAuthorData.value.map((item, index) => `
			  <div class="global-display global-a-items global-f-direction">
				<img src="${item.avatarUrl}" class="fadeIn">
				<p class="text-show">${item.nickname}</p>
				<span class="follow-btn"  data-index="${index}">+ 关注</span>
			  </div>
			`).join('')}
		  </div>
		`
		m2.innerHTML = m2HTML
		 // 绑定事件委托
		app.addEventListener('click', (event) => {
		  const target = event.target
		  if (target.classList.contains('follow-btn')) {
			const index = target.dataset.index
			followBtn(index)
		  }
		})
		setTimeout(()=>{
			skeLeton.value = false
		},2000)
	}
	// 预览图片
	function showImage(image,index_a){
		showImagePreview({
		  images: image,
		  startPosition: index_a,
		});
	}
	// 跳转详情页
	function juMP(_id){
		$router.push({path: '/details-page', query: {_id}})
	}
	// 点赞和取消点赞
	async function giveAlike(index,isLiked,_id){
		if(isLiked){//取消点赞
			await request.get('/cancel_like',{article_id:_id})
			userTravelData.value[index].isLiked = false
			userTravelData.value[index].likes--
		}else{//点赞
			await request.get('/user_like',{article_id:_id})
			userTravelData.value[index].isLiked = true
			userTravelData.value[index].likes++
		}
	}
	// 收藏和取消收藏
	async function operCollection(index,isCollect,_id){
		if(isCollect){//取消收藏
			await request.get('/cancel_collection',{article_id:_id})
			userTravelData.value[index].isCollect = false
			userTravelData.value[index].collections--
		}else{//收藏
			await request.get('/collect_travel',{article_id:_id})
			userTravelData.value[index].isCollect = true
			userTravelData.value[index].collections++
		}
	}
	// 点击关注和取消关注
	async function followBtn(index){
		await request.get('/follow_author',{im_concerned_uid:reAuthorData.value[index].uid})
		const followBtns = document.querySelectorAll('.follow-btn')
		followBtns.forEach(btn => {
		  if (btn.dataset.index === index) {
			btn.classList.add('disable')
			btn.innerHTML = '已关注'
		  }
		})
	}
	// 掉起登录
	function goLogin(){
		emitter.emit('login-pop-up');
	}
	// 登陆成功被触发
	emitter.on('login-success', async() => {
		await requestApi()
	})
	// 上啦加载
	const loading = ref(false);
	const finished = ref(false);
	const page = ref(1)
	async function onLoad(){
		page.value++
		try{
			const userFauthor = await request.get('/user_following_author',{page:page.value})
			userTravelData.value = [...userTravelData.value,...userFauthor.data]
			loading.value = false
			if(userFauthor.data.length === 0){
				finished.value = true
			}
		}catch(e){
			page.value = 1
			loading.value = false
			finished.value = true
		}
	}
</script>

<style>
.bottom-button{
	width: 100px;
	height: 30px;
	margin: 0 !important;
}
.concern-view{
	border-bottom: 1px solid #e3e4e7;
	padding: 0 10px;
}
.concern-Padd{
	margin: 10px 0;
}
.concern-name img{
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 50%;
}
.concern-nackname{
	padding-left: 10px;
}
.concern-nackname p:nth-child(1){
	font-weight: bold;
}
.concern-nackname p:nth-child(2){
	font-size: 12px;
	padding-top: 3px;
	color: #717375;
}
.card-view-b{
	display: grid;
	grid-template-rows: repeat(2, 1fr); /* 设置两行，每行占据 1/2 */
	/* grid-template-columns: repeat(3, 1fr); */
	grid-template-columns: 40% calc(30% - 3px) calc(30% - 3px); /* 设置三列，第一列占据 40%，后面两列每列占据 30%（包括间距） */
	grid-gap: 3px; /* 设置元素之间的间距 */
}
/* 设置第一列的第一个子元素占据两行 */
.card-view-b div:first-child {
	grid-row: 1 / span 2;
	grid-column: 1;
	height: calc(2 * 100px + 3px);
}
.card-view-b div{
	height: 100px;
	position: relative;
	overflow: hidden;
	border-radius: 3px;
}
.card-view-b img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card-view-b div:last-child span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #ffffff;
	font-weight: bold;
	font-size: 24px;
	background-color: rgb(0, 0, 0, 0.3);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.concern-address{
	background-color: #fdf4c4;
	font-size: 13px;
	font-weight: bold;
	display: inline-flex;
	padding: 5px 10px;
	border-radius: 40px;
}
.concern-address img{
	width: 14px;
	height: 14px;
	display: block;
	margin-right: 3px;
}
.concern-content p:nth-child(1){
	font-weight: bold;
}
.concern-details {
	-webkit-line-clamp: 2 !important;
	line-height: 1.5;
}
/* 点赞，收藏，评论数 */
.concern-Data div:nth-child(1){
	flex: 1;
}
.concern-Data div:nth-child(2){
	padding: 0 30px;
}
.concern-Data img{
	width: 25px;
	height: 25px;
	display: block;
}
.concern-Data span{
	font-size: 13px;
	display: block;
	align-self: flex-start;
	color: #717375;
}
.concern-Data div{
	display: flex;
}
/* 推荐关注 */
.rec-Attention{
	padding: 20px 0;
}
.rec-Attention-p{
	font-size: 18px;
	font-weight: bold;
	padding: 0 10px 10px 10px;
}
.Interested-in{
	overflow-x: auto;
	width: 375px;
	scrollbar-width: none; /* 隐藏滚动条 */
}
.Interested-in::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.Interested-in div{
	background-color: #f9f9f9;
	padding: 20px;
	margin: 0 3px;
	border-radius: 7px;
}
.Interested-in img{
	width: 55px;
	height: 55px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.Interested-in p{
	margin: 5px 0;
	font-size: 14px;
	font-weight: bold;
	width: 70px;
	text-align: center;
}
.Interested-in span{
	font-size: 13px;
	font-weight: bold;
	background-color: #f9f0bf;
	border-radius: 40px;
	width: 60px;
	height: 25px;
	line-height: 25px;
	text-align: center;
}
.disable{
	pointer-events:none;
	background: none !important;
	border: 1px solid gainsboro;
	color: gainsboro;
	box-sizing: border-box;
}
</style>